<template>
  <div class="delete-view">
    <h1>删除账户</h1>
    <div class="warning-message">
      <p>您确定要删除您的账户吗？此操作无法撤销。</p>
    </div>
    <form @submit.prevent="handleDelete">
      <div class="input-group">
        <label for="name">姓名</label>
        <input id="name" v-model="formData.name" type="text" placeholder="请输入姓名以确认" required />
      </div>
      <div class="input-group">
        <label for="confirmation">确认删除</label>
        <input 
          id="confirmation" 
          v-model="confirmation" 
          type="text" 
          placeholder="请输入'确认删除'以继续" 
          required 
        />
      </div>
      <div class="button-group">
        <button type="submit" class="delete-button" :disabled="!isConfirmed">删除账户</button>
        <button type="button" class="cancel-button" @click="goBack">取消</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { studentApi, type Student } from '@/services/api'

const formData = ref<Student>({
  name: '',
  sex: '',
  age: 0,
  score: 0
})

const confirmation = ref('')
const router = useRouter()

const isConfirmed = computed(() => {
  return confirmation.value === '确认删除'
})

const handleDelete = async () => {
  if (!isConfirmed.value) {
    alert('请输入"确认删除"以继续')
    return
  }

  try {
    await studentApi.delete(formData.value)
    alert('账户删除成功')
    router.push('/register')
  } catch (error) {
    console.error('删除失败:', error)
    alert('删除失败，请重试')
  }
}

const goBack = () => {
  router.push('/aboutme')
}
</script>

<style scoped>
.delete-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 375px;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #dc3545;
}

.warning-message {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 300px;
}

.warning-message p {
  color: #856404;
  text-align: center;
  margin: 0;
}

.input-group {
  margin-bottom: 15px;
  width: 100%;
  max-width: 300px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.button-group {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

.delete-button, .cancel-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  flex: 1;
}

.delete-button {
  background-color: #dc3545;
  color: white;
}

.delete-button:hover:not(:disabled) {
  background-color: #c82333;
}

.delete-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.cancel-button:hover {
  background-color: #5a6268;
}

@media (max-width: 390px) {
  .delete-view {
    padding: 15px;
  }

  h1 {
    font-size: 22px;
  }

  .input-group label {
    font-size: 14px;
  }

  .input-group input {
    font-size: 14px;
  }
}
</style>